<template>
  <view class="content">
    <view class="">
      <div v-for="(item, i) in items" :key="i" @click="handleOptions(item.voteId)">
        <uni-card :is-shadow="false">
          <uni-row :gutter="20">
            <h2>{{ item.voteName }}</h2>
          </uni-row>
          <uni-row :gutter="20">
            <p>{{ item.description }}</p>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">结束时间</uni-col>
            <uni-col :span="16">{{ item.endDate }}</uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">是否投票</uni-col>
            <uni-col :span="16">
              <div v-if="item.voted">
                <icon type="success" />
              </div>
              <div v-else>
                <icon type="circle" />
              </div>
            </uni-col>
          </uni-row>
        </uni-card>
      </div>
      <uni-load-more :status="statusLoad" />
    </view>
    <uni-popup ref="popupOption" background-color="#fff" class="popup-option">
      <view class="popup-content">
        <scroll-view style="height: 80vh" scroll-y="true">
          <div class="option-action">
            <button type="primary" :loading="loading" @click="handleVote()">投票</button>
          </div>
          <div class="option-action">
            <textarea v-model="voteDescription" placeholder="请输入您的选择该选项的原因" />
          </div>
          <div v-for="(option, i) in options" :key="i" class="option-item" @click="checkOption(option.optionId)">
            <uni-card :is-shadow="false">
              <div>
                <h2><radio :checked="option.checked" />{{ option.optionName }}</h2>
              </div>
              <div>
                <p>{{ option.description }}</p>
              </div>
            </uni-card>
          </div>
          <p class="option-info">请您投出宝贵一票</p>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import request from '@/util/request.js'
export default {
  data() {
    return {
      items: [], // 列表
      page: 1, // 分页
      rows: 5,
      noMore: false, // 有没有更多数据
      statusLoad: 'more',
      unhandleVoteCount: 0,
      showOptions: false,
      voteDescription: '',
      options: [],
      loading: false
    }
  },
  onLoad() {
    if (!uni.getStorageSync('token')) {
      uni.redirectTo({
        url: '/pages/login/index'
      })
      return false
    }
  },
  onShow() {
    this.getList()
  },
  onPullDownRefresh() {
    const that = this
    this.initPage()
    setTimeout(function() {
      that.getList()
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onReachBottom() {
    if (this.noMore !== true) {
      var page = this.page + 1
      this.page = page
      this.getList()
      return
    }
  },
  methods: {
    initPage() {
      this.page = 1
      this.items = []
      this.noMore = false
      this.unhandleVoteCount = 0
      uni.setTabBarBadge({
        index: 0,
        text: this.unhandleVoteCount.toString()
      })
    },
    getList() {
      const that = this
      this.noMore = false
      this.statusLoad = 'loading'
      request.requestApi('/home/votes', 'GET', { page: this.page, rows: this.rows }).then(res => {
        if (res.code === 0) {
          this.pageStatus = 'loading'
          // 有下一页
          if (this.page <= Math.ceil(res.total / this.rows)) {
            if (that.page === 1) {
              that.items = res.items
            } else {
              that.items = that.items.concat(res.items)
            }
            this.statusLoad = 'more'
          } else {
            this.noMore = true
            this.statusLoad = 'noMore'
          }
          // 统计未处理的投票数
          this.unhandleVoteCount = 0
          for (let index = 0; index < that.items.length; index++) {
            const vote = that.items[index]
            if (!vote.voted) {
              this.unhandleVoteCount++
            }
          }
          // 设置徽标
          uni.setTabBarBadge({
            index: 0,
            text: this.unhandleVoteCount.toString()
          })
        } else {
          this.noMore = true
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    handleOptions(voteId) {
      this.showOptions = true
      this.voteDescription = ''
      this.getOptions(voteId)
    },
    getOptions(voteId) {
      var that = this
      request.requestApi(`/home/votes/${voteId}/options`, 'GET', {}).then(res => {
        if (res.code === 0) {
          that.options = res.items
          if (that.options.length === 0) {
            uni.showToast({
              title: '该投票未设置投票选项',
              icon: 'none'
            })
          } else {
            this.$refs.popupOption.open('bottom')
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    checkOption(optionId) {
      for (let index = 0; index < this.options.length; index++) {
        const option = this.options[index]
        if (option.optionId === optionId) {
          this.options[index].checked = true
        } else {
          this.options[index].checked = false
        }
      }
    },
    handleVote() {
      let countChecked = 0
      let optionId = null
      for (let index = 0; index < this.options.length; index++) {
        const option = this.options[index]
        if (option.checked) {
          countChecked++
          optionId = option.optionId
        }
      }
      if (countChecked === 1) {
        var that = this
        const params = {
          description: this.voteDescription
        }
        request.requestApi(`/home/options/${optionId}/check`, 'POST', params).then(res => {
          if (res.code === 0) {
            this.$refs.popupOption.close()
            this.initPage()
            this.getList()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      } else {
        uni.showToast({
          title: '请选择您要投票的选项',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.content {
  padding: 20upx;
}
.content .uni-row {
  margin: 20upx 0;
}
.popup-option {
  z-index: 999;
}
.option-item {
  margin: 20upx 0;
}
.option-info {
  text-align: center;
  color: grey;
  line-height: 80upx;
  height: 80upx;
}
.option-action {
  padding: 10upx 40upx;
}
textarea {
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>
